<template>
  <view class="w-full mt-2 bg-white rounded-lg p-4 box-border text-[24rpx] text-[#333] flex flex-col gap-4 pdpart">
    <view class="mb-6 flex items-start gap-2">
      <text class="text-[32rpx] font-bold mb-4 block">规格</text>

      <view class="flex flex-1 items-center mb-4 flex-wrap gap-2 mt-1" v-if="medicationStore.sku.options.length > 0">
        <nut-button size="small" :type="medicationStore.sku.cur.id === item.id ? 'primary' : 'default'" @click="medicationStore.sku.cur = item" v-for="item in medicationStore.sku.options" :key="item.id">
          {{item.type}}
        </nut-button>
      </view>
      <view class="flex flex-1 items-center mb-4 flex-wrap gap-2 mt-1" v-else>无规格</view>
      <text class="ml-auto text-red-500 font-bold whitespace-nowrap mt-1">¥{{ medicationStore.sku.cur?.price || 0 }}</text>
      <!-- <view class="flex items-center w-[400rpx] text-blue  00 truncate" @tap="showHurry=true">
          {{urgent.cur?.name || '选择'}}
      </view> -->
    </view>

    <!-- 配送要求 -->
    <view class="mb-6" v-show="false">
      <text class="text-[32rpx] font-bold mb-4 block">配送要求</text>

      <!-- 是否加急 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">是否加急：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="urgent" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ urgent ? 400 : 0 }}</text>
      </view>
      <view v-if="urgent" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="urgentRemark" placeholder="请输入加急要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
      </view>

      <!-- 期望配送时间 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">
          <text class="text-red-500">*</text> 期望配送时间：
        </text>
        <view class="flex items-center flex-1">
          <text :class="isEdit ? 'text-blue-500' : 'text-gray-400'" class="mr-2" @tap="isEdit && popPicker('start')">
            {{ startTime || '开始时间（下单后72小时）' }}
          </text>
          <text class="mx-2">-</text>
          <text :class="isEdit ? 'text-blue-500' : 'text-gray-400'" @tap="isEdit && popPicker('end')">
            {{ endTime || '结束时间' }}
          </text>
        </view>
      </view>

      <!-- 夜班 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">夜班：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="nightShift" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ nightShift ? 1000 : 0 }}</text>
      </view>
      <view v-if="nightShift" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="nightShiftRemark" placeholder="请输入夜班要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
      </view>

     
      <!-- 节假日 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">节假日：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="holiday" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ holiday ? 500 : 0 }}</text>
      </view>
      <view v-if="holiday" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="holidayRemark" placeholder="请输入节假日要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
      </view>

      <!-- 配送地址 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">配送地址：</text>
        <view class="flex items-center flex-1">
          <text class="text-[#666]">广西南宁青秀区青山路18号</text>
        </view>
      </view>
    </view>

    <!-- 售后要求 -->
    <view class="mb-6" v-if="false">
      <text class="text-[32rpx] font-bold mb-4 block">售后要求</text>

       <!-- 回寄 -->
       <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">回寄：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="returns" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ returns ? 50 : 0 }}</text>
      </view>
      <view v-if="returns" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="returnsRemark" placeholder="请输入回寄要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
      </view>


      <!-- 配送回执 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">配送回执：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="returns" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
      </view>
      <view v-if="returns" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="receiptRemark" placeholder="请输入配送回执要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
      </view>

      <!-- 是否要求安装 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">是否要求安装：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="installation" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ installation ? 200 : 0 }}</text>
      </view>
      <view v-if="installation" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="installationRemark" placeholder="请输入安装要求说明" :rows="3" :disabled="!isEdit"
          class="w-full" />
      </view>

      <!-- 是否要求配件 -->
      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">是否要求配件：</text>
        <view class="flex items-center flex-1">
          <nut-radio-group v-model="accessories" direction="horizontal" :disabled="!isEdit">
            <nut-radio :label="false" size="small" :disabled="!isEdit">否</nut-radio>
            <nut-radio :label="true" size="small" :disabled="!isEdit">是</nut-radio>
          </nut-radio-group>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ accessories ? 240 : 0 }}</text>
      </view>
      <view v-if="accessories" class="mb-4 ml-[200rpx]">
        <nut-textarea v-model="accessoriesRemark" placeholder="请输入配件要求说明" :rows="3" :disabled="!isEdit"
          class="w-full" />
      </view>

      <!-- 要求事项 -->
      <!-- <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">要求事项：</text>
        <view class="flex items-center flex-1">
          <nut-input
            v-model="requirements"
            placeholder="点击填写要求事项"
            class="flex-1"
          />
        </view>
      </view> -->
    </view>

    <!-- 费用明细 -->
    <!-- <view class="mb-6">
      <text class="text-[32rpx] font-bold mb-4 block">费用明细</text>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">远程费（5公里内）：</text>
        <text class="font-bold">¥200</text>
      </view>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">远程费（5-10公里内加收）：</text>
        <text class="font-bold">¥80</text>
      </view>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">远程费（10公里以上加收）：</text>
        <text class="font-bold">¥16/公里（现优惠至¥10/公里）</text>
      </view>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">远程费小计：</text>
        <text class="text-red-500 font-bold">¥0</text>
      </view>

      <view class="flex items-center mb-4">
        <text class="block font-bold w-[200rpx]">技术层级：</text>
        <view class="flex items-center flex-1">
          <text :class="isEdit ? 'text-blue-500' : 'text-gray-400'" @tap="isEdit && (showTechPicker = true)">
            {{ techLevel.name || '选择技术层级' }}
          </text>
        </view>
        <text class="ml-auto text-red-500 font-bold">¥{{ techLevel.fee || 0 }}</text>
      </view>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">响应时限（加急费）：</text>
        <text class="text-red-500 font-bold">¥{{ urgent ? 400 : 0 }}</text>
      </view>

      <view class="flex justify-between items-center mb-2">
        <text class="text-[#666]">配件价格：</text>
        <text class="text-red-500 font-bold">¥{{ accessories ? 240 : 0 }}</text>
      </view>
    </view> -->
    <view class="mb-6">
      <text class="text-[32rpx] font-bold mb-4 block">个性化要求</text>
      <view class="flex mb-4">
        <text class="block font-bold w-[200rpx]">服务对象备注：</text>
        <view class="flex items-center flex-1">
          <nut-textarea v-model="receiptRemark" placeholder="请输入要求说明" :rows="3" :disabled="!isEdit" class="w-full" />
        </view>
      </view>
    </view>

    <view class="border-t pt-4 mt-4">
      <view class="flex justify-between items-center">
        <text class="text-[32rpx] font-bold">数量：</text>
        <nut-input-number v-model="quantity" :min="1" :max="1000" />
      </view>
    </view>

    <view class="border-t pt-4 mt-4">
      <view class="flex justify-between items-center">
        <text class="text-[32rpx] font-bold">预收费：</text>
        <text class="text-red-500 font-bold text-[36rpx]">¥{{ totalFee }}</text>
      </view>
    </view>

    <!-- 时间选择器弹窗 -->
    <nut-popup v-model:visible="showTimePicker" position="bottom">
      <nut-date-picker type="datetime" v-model="selectedDate" :min-date="minDate" :max-date="maxDate"
        :three-dimensional="false" @confirm="confirmTime" @cancel="showTimePicker = false" />
    </nut-popup>

    <!-- 技术层级选择器 -->
    <nut-popup v-model:visible="showTechPicker" position="bottom">
      <nut-picker v-model="techPickerValue" :columns="techLevelOptions" title="选择技术层级" @confirm="confirmTechLevel"
        @cancel="showTechPicker = false" />
    </nut-popup>

    <nut-popup v-model:visible="showSku" position="bottom">
      <nut-picker v-model="skuPickerValue" :columns="skuOptions" title="选择规格" @confirm="confirmSku"
        @cancel="showSku = false" />
    </nut-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, defineProps, defineExpose, defineModel, watch, defineEmits } from 'vue'
import { useMedicationStore } from '@/store/modules/medication';
const medicationStore = useMedicationStore();
const showSku = ref(false);

// 定义props
const props = defineProps({
  editMode: {
    type: Boolean,
    default: true,
  },
  info: {
    type: Object,
    default: () => ({})
  }
})

// 定义emit事件
const emit = defineEmits(['update:extraFees'])

// 编辑状态控制
const isEdit = ref(props.editMode)

// 监听 props.editMode 的变化
watch(
  () => props.editMode,
  newValue => {
    isEdit.value = newValue
  }
)

// 双向绑定的数量属性
const quantity = defineModel('quantity', { default: 1 })
// 配送要求选项
const urgent = ref(false)
const nightShift = ref(false)
const returns = ref(false)
const holiday = ref(false)

// 售后要求选项
const receipt = ref(false)
const installation = ref(false)
const accessories = ref(false)
// const requirements = ref('')

// 各种要求的备注
const urgentRemark = ref('')
const nightShiftRemark = ref('')
const returnsRemark = ref('')
const holidayRemark = ref('')
const receiptRemark = ref('')
const installationRemark = ref('')
const accessoriesRemark = ref('')

// 技术层级
const techLevel = ref({})
const techLevelOptions = [
  { text: '初级技术员 - ¥0', value: 0, name: '初级技术员', fee: 0 },
  { text: '中级技术员 - ¥200', value: 200, name: '中级技术员', fee: 200 },
  { text: '高级技术员 - ¥400', value: 400, name: '高级技术员', fee: 400 },
  { text: '专家技术员 - ¥600', value: 600, name: '专家技术员', fee: 600 },
]

// 时间选择
const startTime = ref('')
const endTime = ref('')
const selectedDate = ref(new Date())
const minDate = ref(new Date())
const maxDate = ref(new Date(2030, 12, 31))
const showTimePicker = ref(false)
const showTechPicker = ref(false)
const techPickerValue = ref([0])

// 当前选择的时间类型
const currentTimeType = ref('start')

// 计算额外费用明细
const extraFees = computed(() => {
  const fees = []
  
  if (urgent.value) {
    fees.push({
      name: '加急费',
      amount: 400,
      remark: urgentRemark.value
    })
  }
  
  if (nightShift.value) {
    fees.push({
      name: '夜班费',
      amount: 1000,
      remark: nightShiftRemark.value
    })
  }
  
  if (returns.value) {
    fees.push({
      name: '回寄费',
      amount: 50,
      remark: returnsRemark.value
    })
  }
  
  if (holiday.value) {
    fees.push({
      name: '节假日费',
      amount: 500,
      remark: holidayRemark.value
    })
  }
  
  if (installation.value) {
    fees.push({
      name: '安装费',
      amount: 200,
      remark: installationRemark.value
    })
  }
  
  if (accessories.value) {
    fees.push({
      name: '配件费',
      amount: 240,
      remark: accessoriesRemark.value
    })
  }
  
  if (techLevel.value.fee) {
    fees.push({
      name: '技术层级费',
      amount: techLevel.value.fee,
      remark: techLevel.value.name
    })
  }
  
  return fees
})

// 监听额外费用变化并传递给父组件
watch(
  extraFees,
  (newFees) => {
    // part2 组件 - 额外费用变化
    emit('update:extraFees', newFees)
  },
  { deep: true, immediate: true }
)

// 计算总费用
const totalFee = computed(() => {
  let total = 0 // 基础远程费

  if (urgent.value) total += 400 // 加急费
  if (nightShift.value) total += 1000 // 夜班费
  if (returns.value) total += 50 // 回寄费
  if (holiday.value) total += 500 // 节假日费
  if (installation.value) total += 200 // 安装费
  if (accessories.value) total += 240 // 配件费
  if (techLevel.value.fee) total += techLevel.value.fee // 技术层级费

  total += medicationStore.sku.cur?.price || 0;

  return total * quantity.value
})

onMounted(() => {

})

// 弹出时间选择器
const popPicker = type => {
  currentTimeType.value = type
  showTimePicker.value = true

  // 设置最小时间为当前时间后72小时
  const now = new Date()
  const hours = type === 'start' ? 72 : 0
  minDate.value = new Date(now.getTime() + hours * 60 * 60 * 1000)
}

// 确认时间选择
const confirmTime = value => {
  const timeStr = formatDateTime(value.selectedValue)

  if (currentTimeType.value === 'start') {
    startTime.value = timeStr
  } else {
    endTime.value = timeStr
  }

  showTimePicker.value = false
}

// 格式化时间
const formatDateTime = dateArray => {
  const [year, month, day, hour, minute] = dateArray
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
}

// 确认技术层级选择
const confirmTechLevel = ({ selectedValue }) => {
  const selectedOption = techLevelOptions.find(
    option => option.value === selectedValue[0]
  )
  techLevel.value = selectedOption || {}
  techPickerValue.value = selectedValue
  showTechPicker.value = false
}

// 初始化最小时间
const initMinDate = () => {
  const now = new Date()
  minDate.value = new Date(now.getTime() + 72 * 60 * 60 * 1000)
}

// 切换编辑状态的方法
const setEditMode = mode => {
  isEdit.value = mode
}

// 获取当前编辑状态
const getEditMode = () => {
  return isEdit.value
}

// 组件初始化
initMinDate()

// 暴露方法给父组件
defineExpose({
  setEditMode,
  getEditMode,
})
</script>

<style lang="scss">
.pdpart {


  :deep(.nut-input) {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8rpx;
    padding: 16rpx;
  }

  .nut-textarea {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8rpx;
    padding: 16rpx;
    font-size: 24rpx;
    height: 120rpx;
  }
  textarea{
    height: 100%;
  }

  :deep(.nut-radio-group) {
    gap: 32rpx;
  }

  :deep(.nut-radio) {
    font-size: 24rpx;
  }
}
</style>
